<template>
  <aside class="aui-sidebar" :class="`aui-sidebar--${$store.state.sidebarLayoutSkin}`">
    <div class="aui-sidebar__inner">
      <el-menu
        :default-active="$store.state.sidebarMenuActiveName"
        :collapse="$store.state.sidebarFold"
        :unique-opened="true"
        :collapseTransition="false"
        class="aui-sidebar__menu">
        <el-menu-item index="home" @click="$router.push({ name: 'home' })">
          <svg class="icon-svg aui-sidebar__menu-icon" aria-hidden="true"><use xlink:href="#shouye"></use></svg>
          <span slot="title">首页</span>
        </el-menu-item>
        <sub-menu
          v-for="menu in $store.state.sidebarMenuList"
          :key="menu.id"
          :menu="menu"
          :dynamicMenuRoutes="dynamicMenuRoutes">
        </sub-menu>
      </el-menu>
    </div>
  </aside>
</template>

<script>
import SubMenu from './main-sidebar-sub-menu'
import { isURL } from '@/utils/validate'
export default {
  data () {
    return {
      dynamicMenuRoutes: []
    }
  },
  components: {
    SubMenu
  },
  watch: {
    $route: 'routeHandle'
  },
  created () {
    this.$store.state.sidebarMenuList = window.SITE_CONFIG['menuList'] || []
    this.dynamicMenuRoutes = window.SITE_CONFIG['dynamicMenuRoutes'] || []
    this.routeHandle(this.$route)
  },
  methods: {
    // 路由操作
    routeHandle (route) {
      if (route.meta.isTab) {
        // tab选中, 不存在先添加
        var tab = this.$store.state.contentTabs.filter(item => item.name === route.name)[0]
        if (!tab) {
          if (route.meta.isDynamic) {
            route = this.dynamicMenuRoutes.filter(item => item.name === route.name)[0]
            if (!route) {
              return console.error('未能找到可用标签页!')
            }
          }
          tab = {
            menuId: route.meta.menuId || route.name,
            name: route.name,
            title: route.meta.title,
            type: isURL(route.meta.iframeUrl) ? 'iframe' : 'module',
            iframeUrl: route.meta.iframeUrl || ''
          }
          this.$store.state.contentTabs = this.$store.state.contentTabs.concat(tab)
        }
        this.$store.state.sidebarMenuActiveName = tab.menuId + ''
        this.$store.state.contentTabsActiveName = tab.name
      }
    }
  }
}
</script>
